<template>
  <div class="manager-page">
    <div class="manager-container">
      <h2 class="text">管理员登录系统</h2>
      <form @submit.prevent="handleSubmit">
        <label for="username">管理员名称：</label>
        <div class="input-icon-group">
          <input type="text" id="username" v-model="username" required />
          <i class="iconfont icon-xiaoren"></i>
        </div>
        <label for="first_password">管理员密码：</label>
        <div class="input-icon-group">
          <input type="password" id="password" v-model="password" required />
          <i class="iconfont icon-mimasuo"></i>
        </div>
        <div>
          <button type="submit">进入管理员模式</button>
        </div>
      </form>
      <div class="go-login">
        <p>我是顾客,<a href="/login">顾客登录页面</a></p>
      </div>
    </div>
  </div>
</template>

<script>
import { useUserStore } from '@/stores'
import showPrompt from '@/utils/showPrompt'
const userStore = useUserStore()
export default {
  data() {
    return {
      username: '',
      password: '',
      errorMessage: ''
    }
  },
  methods: {
    handleSubmit() {
      // 清空之前的错误信息
      this.errorMessage = ''

      // 验证用户名和密码是否为空
      if (!this.username.trim()) {
        this.errorMessage = '管理员名称不能为空'
        return
      }
      if (!this.password.trim()) {
        this.errorMessage = '管理员密码不能为空'
        return
      }

      // 模拟登录逻辑
      console.log('管理员登录信息：', { username: this.username, password: this.password })

      const isAdmin = this.username === 'admin' && this.password === '123456'
      if (isAdmin) {
        userStore.setAdmin(this.username)
        showPrompt('登录成功', 'success')
        this.$router.push('/admin')
      } else {
        showPrompt('管理员名称或密码错误', 'error')
        this.errorMessage = '管理员名称或密码错误'
      }
    }
  }
}
</script>

<style scoped>
.manager-container {
  padding: 20px;
  border: 2px solid white;
  border-radius: 10px;
  width: 400px;
  height: 400px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  border-radius: 8px;
  padding: 6px;
  border: 1px solid #ccc;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 10px;
  margin-bottom: 10px;
}

button:hover {
  background-color: #0056b3;
}

.go-login a {
  text-decoration: none;
  color: purple;
}

.input-icon-group {
  display: flex;
  align-items: center; /* 垂直居中 */
  margin-bottom: 10px; /* 与下一个元素的间距 */
}

.input-icon-group input {
  flex: 1; /* 输入框占据剩余空间 */
  margin-bottom: 0; /* 移除原有的底部外边距 */
}

.input-icon-group .iconfont {
  margin-left: 10px; /* 图标与输入框的间距 */
  font-size: 20px;
}

.manager-page {
  min-height: calc(100vh - 80px);
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #b0c42d);
  background-size: 500% 500%;
  animation: gradient 10s ease infinite;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.text {
  display: flex;
  justify-content: center;
  font-size: 40px;
  color: transparent;
  letter-spacing: 5px;
  background: linear-gradient(to right, #fff 0, #bdd454 20%, #fff 40%);
  background-position: -32px 0;
  background-clip: text;
  animation: eff 3s linear infinite;
}
@keyframes eff {
  to {
    background-position: 1000px 0;
    /* 动画结束时，设置背景渐变的位置向右移动到500像素，从而创建流光效果 */
  }
}
</style>
